<template>
  <div class="category-products-page">
    <div class="i_bg">
      <div class="postion">
        <span class="fl">全部 > {{ categoryName }} > </span>
      </div>
      
      <!--Begin 筛选条件 Begin-->
      <div class="content mar_10">
        <table border="0" class="choice" style="width:100%; font-family:'宋体'; margin:0 auto;" cellspacing="0" cellpadding="0">
          <tbody>
            <tr valign="top">
              <td>&nbsp; 价格：</td>                                                                                                       
              <td class="td_a">
                <a href="#" v-for="(price, index) in prices" :key="index" :class="{ 'now': selectedPrice === price }" @click.prevent="selectPrice(price)">
                  {{ price }}
                </a>
              </td>
            </tr>                                              
          </tbody>
        </table>                                                                                 
      </div>
      <!--End 筛选条件 End-->
      
      <div class="content mar_20">

        <div class="l_history">
        	<div class="his_t">
            	<span class="fl">浏览历史</span>
                <span class="fr"><a href="#">清空</a></span>
            </div>
        	<ul>
            	<li>
                    <div class="img"><a href="#"><img src="images/his_1.jpg" width="185" height="162" /></a></div>
                	<div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                    <div class="price">
                    	<font>￥<span>368.00</span></font> &nbsp; 18R
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img src="images/his_2.jpg" width="185" height="162" /></a></div>
                	<div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                    <div class="price">
                    	<font>￥<span>768.00</span></font> &nbsp; 18R
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img src="images/his_3.jpg" width="185" height="162" /></a></div>
                	<div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                    <div class="price">
                    	<font>￥<span>680.00</span></font> &nbsp; 18R
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img src="images/his_4.jpg" width="185" height="162" /></a></div>
                	<div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                    <div class="price">
                    	<font>￥<span>368.00</span></font> &nbsp; 18R
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img src="images/his_5.jpg" width="185" height="162" /></a></div>
                	<div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                    <div class="price">
                    	<font>￥<span>368.00</span></font> &nbsp; 18R
                    </div>
                </li>
        	</ul>
        </div> 

        <div class="l_list">
          <div class="list_t">
            <span class="fl list_or">
              <a href="#" :class="{ 'now': sortOrder === '' }" @click.prevent="sortProducts('')">默认</a>
              <a href="#" :class="{ 'now': sortOrder === 'sales' }" @click.prevent="sortProducts('sales')">
                <span class="fl">销量</span>                        
                <span class="i_up">销量从低到高显示</span>
                <span class="i_down">销量从高到低显示</span>                                                     
              </a>
              <a href="#" :class="{ 'now': sortOrder === 'price' }" @click.prevent="sortProducts('price')">
                <span class="fl">价格</span>                        
                <span class="i_up">价格从低到高显示</span>
                <span class="i_down">价格从高到低显示</span>     
              </a>
              <a href="#" :class="{ 'now': sortOrder === 'new' }" @click.prevent="sortProducts('new')">新品</a>
            </span>
            <span class="fr">共发现{{ pagination.total }}件</span>
          </div>

          

          <div class="list_c">
            
            <!-- 商品列表 -->
            <div class="product-list" v-loading="loading">
              <div v-if="!loading && productList && productList.length > 0">
                <ul class="cate_list">
                  <li v-for="product in productList" :key="product.id">
                    <div class="img">
                      <a href="#" @click.prevent="viewProduct(product.id)">
                        <img :src="getProductImage(product)" :alt="product.name" width="210" height="185" @error="handleImageError" />
                      </a>
                    </div>
                    <div class="price">
                      <font>￥<span>{{ product.price }}</span></font> &nbsp; {{ product.sales || 0 }}R
                    </div>
                    <div class="name">
                      <a href="#" @click.prevent="viewProduct(product.id)">{{ product.name }}</a>
                    </div>
                    <div class="carbg">
                      <a href="#" class="ss" @click.prevent="addToFavorites(product)">
                        <span v-if="isProductFavorited(product.id)">已收藏</span>
                        <span v-else>收藏</span>
                      </a>
                      <a href="#" class="j_car" @click.prevent="addToCart(product)">加入购物车</a>
                    </div>
                  </li>
                </ul>
              </div>
              
              <!-- 调试信息：显示商品数量
              <div v-if="!loading" style="padding: 20px; text-align: center;">
                <p>商品数量: {{ productList ? productList.length : 0 }}</p>
                <p v-if="!productList || productList.length === 0">该分类下暂无商品</p>
                <div v-if="productList && productList.length > 0" style="text-align: left; max-height: 300px; overflow-y: auto;">
                  <p>商品列表内容:</p>
                  <pre>{{ JSON.stringify(productList, null, 2) }}</pre>
                </div>
                添加更多调试信息
                <div style="text-align: left; margin-top: 10px; padding: 10px; background-color: #f5f5f5;">
                  <p>调试信息:</p>
                  <p>分类ID: {{ categoryId || '未设置' }}</p>
                  <p>加载状态: {{ loading ? '加载中' : '已完成' }}</p>
                  <p>商品列表类型: {{ productList ? typeof productList : '未定义' }}</p>
                  <p>商品列表是否为数组: {{ Array.isArray(productList) ? '是' : '否' }}</p>
                </div>
              </div> -->
              
              <!-- 无商品 -->
              <div v-if="!loading && (!productList || productList.length === 0)" class="no-products">
                <el-empty description="该分类下暂无商品" />
              </div>
            </div>
            
            <!-- 分页 -->
            <div class="pages" v-if="pagination.total > pagination.size">
              <a href="#" class="p_pre" @click.prevent="prevPage" v-if="pagination.current > 1">上一页</a>
              <a href="#" v-for="page in pageNumbers" :key="page" :class="{ 'cur': page === pagination.current }" @click.prevent="goToPage(page)">{{ page }}</a>
              <a href="#" class="p_pre" @click.prevent="nextPage" v-if="pagination.current < totalPages">下一页</a>
            </div>
          </div>
        </div>
      </div>
      
      <!-- <div style="margin-top: 20px; margin-bottom: 20px; text-align: center;">
        <router-link to="/" class="btn btn-primary">返回首页</router-link>
      </div> -->
    </div>
  </div>
</template>

<script>
import { queryProduct, getCategoryById, getSameCategoryProducts } from '@/api/productApi'
import { addToCart } from '@/api/cartApi'
import { addFavorite, removeFavorite, getFavorites, getFavoriteItems, createFavorite } from '@/api/favoriteApi'

export default {
  name: 'CategoryProducts',
  data() {
    return {
      categoryId: '',
      categoryName: '商品分类',
      productList: [],
      pagination: {
        current: 1,
        size: 20,
        total: 0
      },
      loading: false,
      selectedBrand: '',
      selectedPrice: '',
      sortOrder: '',
      brands: ['香奈儿（Chanel）', '迪奥（Dior）', '范思哲（VERSACE）', '菲拉格慕（Ferragamo）', '兰蔻（LANCOME）', '爱马仕（HERMES）'],
      prices: ['0-199', '200-399', '400-599', '600-899', '900-1299', '1300-1399', '1400以上'],
      userId: '',
      isLoggedIn: false,
      favoriteItems: [], // 存储当前用户的收藏商品
      defaultCollectId: ''
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.pagination.total / this.pagination.size)
    },
    pageNumbers() {
      const pages = []
      const total = this.totalPages
      const current = this.pagination.current
      let start = Math.max(1, current - 2)
      let end = Math.min(total, current + 2)
      
      if (end - start < 4) {
        if (start === 1) {
          end = Math.min(total, start + 4)
        } else {
          start = Math.max(1, end - 4)
        }
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      
      return pages
    }
  },
  watch: {
    // 监听路由变化
    '$route.params.id': {
      handler(newId) {
        console.log('路由参数变化，新的分类ID:', newId);
        this.categoryId = newId || ''
        console.log('设置分类ID为:', this.categoryId);
        this.pagination.current = 1
        if (this.categoryId) {
          this.fetchProductList()
        }
      },
      immediate: true
    }
  },
  created() {
    console.log('CategoryProducts组件创建，当前路由参数:', this.$route.params);
    console.log('分类ID:', this.$route.params.id);
    this.checkLoginStatus()
    if (this.isLoggedIn) {
      this.loadFavoriteData()
    }
  },
  created() {
    console.log('CategoryProducts组件创建，当前路由参数:', this.$route.params);
    console.log('分类ID:', this.$route.params.id);
    this.checkLoginStatus()
    if (this.isLoggedIn) {
      this.loadFavoriteData()
    }
  },
  methods: {
    // 获取商品列表
    async fetchProductList() {
      if (!this.categoryId) {
        console.log('分类ID为空，不获取商品列表')
        return
      }
      
      this.loading = true
      try {
        console.log('开始获取分类商品列表，分类ID:', this.categoryId);
        // 设置分类名称
        await this.setCategoryName(this.categoryId)
        
        // 使用新的接口获取相同分类的商品
        const res = await getSameCategoryProducts(this.categoryId)
        console.log('分类商品查询结果:', res)
        console.log('响应类型:', typeof res)
        console.log('是否为数组:', Array.isArray(res))
        
        // 根据后端接口返回的数据格式处理
        // 后端接口: getSameCategoryProducts 返回 List<Product>
        if (Array.isArray(res)) {
          console.log('直接返回数组格式，处理商品数据');
          // 直接使用返回的数组
          this.productList = res.map(product => ({
            id: product.id || '',
            name: product.name || '未知商品',
            price: product.price || 0,
            stock: product.stock || 0,
            fileName: product.fileName || '',
            description: product.description || '',
            sales: product.sales || product.saleCount || 0,
            ...product
          }));
          this.pagination.total = res.length;
          console.log('成功设置商品列表，商品数量:', this.productList.length);
        } else if (res && res.data && Array.isArray(res.data)) {
          console.log('data字段为数组格式，处理商品数据');
          // 如果数据在data字段中
          this.productList = res.data.map(product => ({
            id: product.id || '',
            name: product.name || '未知商品',
            price: product.price || 0,
            stock: product.stock || 0,
            fileName: product.fileName || '',
            description: product.description || '',
            sales: product.sales || product.saleCount || 0,
            ...product
          }));
          this.pagination.total = res.data.length;
          console.log('成功设置商品列表，商品数量:', this.productList.length);
        } else if (res && typeof res === 'object' && res !== null) {
          // 检查对象中是否有商品数组
          let foundProducts = false;
          
          // 遍历对象的所有属性
          for (const key in res) {
            if (Array.isArray(res[key]) && res[key].length > 0 && 
                typeof res[key][0] === 'object' && res[key][0] !== null &&
                (res[key][0].id || res[key][0].name)) {
              console.log(`在属性 ${key} 中找到商品数组`);
              this.productList = res[key].map(product => ({
                id: product.id || '',
                name: product.name || '未知商品',
                price: product.price || 0,
                stock: product.stock || 0,
                fileName: product.fileName || '',
                description: product.description || '',
                sales: product.sales || product.saleCount || 0,
                ...product
              }));
              this.pagination.total = res[key].length;
              console.log('成功设置商品列表，商品数量:', this.productList.length);
              foundProducts = true;
              break;
            }
          }
          
          if (!foundProducts) {
            // 其他情况，设置为空数组
            this.productList = [];
            this.pagination.total = 0;
            console.warn('无法识别的数据格式，商品列表为空');
            console.log('响应内容:', res);
          }
        } else {
          // 其他情况，设置为空数组
          this.productList = [];
          this.pagination.total = 0;
          console.warn('无法识别的数据格式，商品列表为空');
          console.log('响应内容:', res);
        }
        console.log('最终商品列表:', this.productList);
      } catch (error) {
        console.error('获取分类商品失败:', error)
        // 详细记录错误信息
        if (error.response) {
          console.error('错误响应:', {
            status: error.response.status,
            statusText: error.response.statusText,
            data: error.response.data
          });
        }
        
        this.$message.error('获取分类商品失败: ' + (error.message || '未知错误'))
        this.productList = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },
    
    // 设置分类名称
    async setCategoryName(categoryId) {
      try {
        console.log('尝试获取分类信息，分类ID:', categoryId);
        const res = await getCategoryById(categoryId)
        console.log('获取分类信息响应:', res);
        
        // 根据后端接口返回的数据格式处理
        // 后端接口: getCategoryById 返回 ProductCategory 对象
        if (res && res.name) {
          this.categoryName = res.name || '商品分类'
          console.log('成功设置分类名称:', this.categoryName);
        } else if (res && res.data && res.data.name) {
          this.categoryName = res.data.name || '商品分类'
          console.log('成功设置分类名称:', this.categoryName);
        } else {
          console.warn('响应中没有name字段，使用默认映射');
          // 如果无法获取分类信息，使用默认映射
          const categoryNames = {
            '548': '化妆品',
            '628': '家用商品',
            '654': '面部护理',
            '655': '少女派',
            '656': '餐具',
            '657': '卫具',
            '658': '叉子',
            '659': '锅',
            '660': '进口食品,生鲜',
            '661': '零食/糖果/巧克力',
            '662': '坚果',
            '663': '蜜饯',
            '670': '电子商品',
            '671': '手机',
            '672': '华为手机',
            '673': '联想手机',
            '674': '手环',
            '675': '小米手环',
            '676': '保健食品',
            '677': '老年保健品',
            '678': '中年营养品',
            '679': '儿童保健品',
            '680': '脑白金',
            '681': '箱包',
            '682': '旅行箱',
            '683': '手提箱',
            '684': '大型',
            '685': '小型',
            '686': '中型',
            '687': '大型',
            '688': '中型',
            '689': '小型',
            '690': '电脑',
            '691': '联想电脑',
            '692': '刀叉',
            '693': '碗筷',
            '696': '客厅专用',
            '700': '马桶',
            '701': '沙发',
            '702': '收纳用品',
            '703': '清洁用品',
            '704': '中年维生素',
            '705': '儿童奶粉',
            '706': '儿童营养品',
            '707': '大型旅行箱',
            '708': '中型旅行箱',
            '709': '婴儿推车',
            '710': '大型手提箱',
            '711': '婴儿用品'
          }
          
          this.categoryName = categoryNames[categoryId] || '商品分类'
        }
      } catch (error) {
        console.error('获取分类名称失败:', error)
        // 详细记录错误信息
        if (error.response) {
          console.error('错误响应:', {
            status: error.response.status,
            statusText: error.response.statusText,
            data: error.response.data
          });
        }
        
        // 如果无法获取分类信息，使用默认映射
        const categoryNames = {
          '548': '化妆品',
          '628': '家用商品',
          '654': '面部护理',
          '655': '少女派',
          '656': '餐具',
          '657': '卫具',
          '658': '叉子',
          '659': '锅',
          '660': '进口食品,生鲜',
          '661': '零食/糖果/巧克力',
          '662': '坚果',
          '663': '蜜饯',
          '670': '电子商品',
          '671': '手机',
          '672': '华为手机',
          '673': '联想手机',
          '674': '手环',
          '675': '小米手环',
          '676': '保健食品',
          '677': '老年保健品',
          '678': '中年营养品',
          '679': '儿童保健品',
          '680': '脑白金',
          '681': '箱包',
          '682': '旅行箱',
          '683': '手提箱',
          '684': '大型',
          '685': '小型',
          '686': '中型',
          '687': '大型',
          '688': '中型',
          '689': '小型',
          '690': '电脑',
          '691': '联想电脑',
          '692': '刀叉',
          '693': '碗筷',
          '696': '客厅专用',
          '700': '马桶',
          '701': '沙发',
          '702': '收纳用品',
          '703': '清洁用品',
          '704': '中年维生素',
          '705': '儿童奶粉',
          '706': '儿童营养品',
          '707': '大型旅行箱',
          '708': '中型旅行箱',
          '709': '婴儿推车',
          '710': '大型手提箱',
          '711': '婴儿用品'
        }
        
        this.categoryName = categoryNames[categoryId] || '商品分类'
        console.log('使用默认分类名称:', this.categoryName);
      }
    },
    
    // 查看商品详情
    viewProduct(productId) {
      this.$router.push({ name: 'ProductDetail', params: { id: productId } })
    },
    
    // 检查用户登录状态
    checkLoginStatus() {
      const userInfo = localStorage.getItem('userInfo')
      this.isLoggedIn = !!userInfo
      if (userInfo) {
        try {
          const user = JSON.parse(userInfo)
          this.userId = user.id || user.userId || ''
        } catch (e) {
          console.error('解析用户信息失败:', e)
          localStorage.removeItem('userInfo')
        }
      }
    },
    
    // 获取用户的收藏夹数据
    async loadFavoriteData() {
      if (!this.isLoggedIn || !this.userId) return
      
      try {
        // 获取用户的收藏夹
        const collectsResponse = await getFavorites(this.userId)
        const collects = Array.isArray(collectsResponse) ? collectsResponse : collectsResponse.data || []
        
        // 查找默认收藏夹
        const defaultCollect = collects.find(collect => collect.name === '默认收藏夹')
        if (defaultCollect) {
          this.defaultCollectId = defaultCollect.id
        } else if (collects.length > 0) {
          // 如果没有默认收藏夹，使用第一个收藏夹
          this.defaultCollectId = collects[0].id
        }
        
        // 获取默认收藏夹中的商品
        if (this.defaultCollectId) {
          const itemsResponse = await getFavoriteItems(this.userId, this.defaultCollectId)
          this.favoriteItems = Array.isArray(itemsResponse) ? itemsResponse : itemsResponse.data || []
        }
      } catch (error) {
        console.error('加载收藏夹数据失败:', error)
        this.$message.error('加载收藏夹数据失败: ' + (error.message || '未知错误'))
      }
    },
    
    // 检查商品是否已收藏
    isProductFavorited(productId) {
      return this.favoriteItems.some(item => item.productId === productId)
    },
    
    // 添加到收藏
    async addToFavorites(product) {
      // 检查登录状态
      if (!this.isLoggedIn) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      
      // 确保已获取收藏夹信息
      if (!this.defaultCollectId) {
        await this.loadFavoriteData()
      }
      
      // 如果仍未获取到默认收藏夹ID，则创建默认收藏夹
      if (!this.defaultCollectId) {
        try {
          await createFavorite(this.userId, '默认收藏夹')
          await this.loadFavoriteData()
        } catch (error) {
          console.error('创建默认收藏夹失败:', error)
          this.$message.error('创建默认收藏夹失败')
          return
        }
      }
      
      try {
        // 检查商品是否已收藏
        const isFavorited = this.isProductFavorited(product.id)
        
        if (isFavorited) {
          // 如果已收藏，则取消收藏
          await removeFavorite(this.userId, product.id, this.defaultCollectId)
          // 从本地列表中移除
          this.favoriteItems = this.favoriteItems.filter(item => item.productId !== product.id)
          this.$message.success('已取消收藏')
        } else {
          // 如果未收藏，则添加收藏
          await addFavorite(this.userId, product.id, this.defaultCollectId)
          // 添加到本地列表
          const favoriteItem = {
            productId: product.id,
            productName: product.name,
            productImage: product.fileName || ''
          }
          this.favoriteItems.push(favoriteItem)
          this.$message.success('已添加到收藏夹')
        }
        
        // 通知全局收藏夹组件更新
        window.dispatchEvent(new Event('favorite-updated'))
      } catch (error) {
        console.error('收藏操作失败:', error)
        this.$message.error('操作失败: ' + (error.message || '网络错误'))
      }
    },
    
    // 添加到购物车
    async addToCart(product) {
      try {
        // 构造购物车项目数据
        const cartItem = {
          productId: product.id.toString(),
          productName: product.name,
          quantity: 1, // 默认数量为1
          price: parseFloat(product.price),
          image: product.fileName || ''
        };

        // 调用API添加到购物车
        const res = await addToCart(cartItem);
        
        // 检查响应结果
        if (res === 'success') {
          this.$message.success(`已添加到购物车: ${product.name}`);
          // 触发全局购物车更新事件
          window.dispatchEvent(new Event('cart-updated'));
        } else {
          this.$message.error(res.message || '加入购物车失败');
        }
      } catch (error) {
        console.error('添加购物车失败:', error);
        this.$message.error('添加购物车失败: ' + (error.message || '网络错误'));
      }
    },
    
    // 选择品牌
    selectBrand(brand) {
      this.selectedBrand = this.selectedBrand === brand ? '' : brand
      this.fetchProductList()
    },
    
    // 选择价格区间
    selectPrice(price) {
      this.selectedPrice = this.selectedPrice === price ? '' : price
      this.fetchProductList()
    },
    
    // 商品排序
    sortProducts(order) {
      this.sortOrder = order
      this.fetchProductList()
    },
    
    // 上一页
    prevPage() {
      if (this.pagination.current > 1) {
        this.pagination.current--
        this.fetchProductList()
      }
    },
    
    // 下一页
    nextPage() {
      if (this.pagination.current < this.totalPages) {
        this.pagination.current++
        this.fetchProductList()
      }
    },
    
    // 跳转到指定页
    goToPage(page) {
      if (page !== this.pagination.current) {
        this.pagination.current = page
        this.fetchProductList()
      }
    },
    
    // 处理分页大小改变
    handleSizeChange(size) {
      this.pagination.size = size
      this.fetchProductList()
    },
    
    // 处理当前页改变
    handleCurrentChange(current) {
      this.pagination.current = current
      this.fetchProductList()
    },
    
    // 获取商品图片
    getProductImage(product) {
      // 确保 product 对象存在
      if (!product) {
        console.warn('商品对象为空，使用默认图片');
        return require('@/assets/images/default_product.jpg');
      }
      
      // 检查是否有 fileName 字段
      if (product.fileName) {
        try {
          // 先尝试从 assets/files 目录加载
          const imageModule = require(`@/assets/files/${product.fileName}`);
          console.log(`成功加载商品图片: ${product.fileName}`);
          return imageModule;
        } catch (error) {
          // 如果图片不存在，尝试从 public/images 目录加载
          try {
            const imageModule = require(`@/assets/images/${product.fileName}`);
            console.log(`从images目录成功加载商品图片: ${product.fileName}`);
            return imageModule;
          } catch (secondError) {
            // 如果都不存在，返回默认图片
            console.warn(`商品图片加载失败: ${product.fileName}`, error);
          }
        }
      }
      
      // 如果没有fileName或加载失败，返回默认图片
      try {
        return require('@/assets/images/default_product.jpg');
      } catch (error) {
        console.error('默认图片加载失败:', error);
        return ''; // 返回空字符串作为最后的备选方案
      }
    },
    
    // 处理图片加载错误
    handleImageError(event) {
      console.log('图片加载错误，尝试使用默认图片');
      try {
        event.target.src = require('@/assets/images/default_product.jpg');
      } catch (error) {
        console.error('默认图片加载失败:', error);
        // 如果默认图片也加载失败，设置为空白图片
        event.target.src = '';
      }
    },
    
    // 检查用户登录状态
    checkLoginStatus() {
      const userInfo = localStorage.getItem('userInfo')
      this.isLoggedIn = !!userInfo
      if (userInfo) {
        try {
          const user = JSON.parse(userInfo)
          this.userId = user.id || user.userId || ''
        } catch (e) {
          console.error('解析用户信息失败:', e)
          localStorage.removeItem('userInfo')
        }
      }
    },
    
    // 获取用户的收藏夹数据
    async loadFavoriteData() {
      if (!this.isLoggedIn || !this.userId) return
      
      try {
        // 获取用户的收藏夹
        const collectsResponse = await getFavorites(this.userId)
        const collects = Array.isArray(collectsResponse) ? collectsResponse : collectsResponse.data || []
        
        // 查找默认收藏夹
        const defaultCollect = collects.find(collect => collect.name === '默认收藏夹')
        if (defaultCollect) {
          this.defaultCollectId = defaultCollect.id
        } else if (collects.length > 0) {
          // 如果没有默认收藏夹，使用第一个收藏夹
          this.defaultCollectId = collects[0].id
        }
        
        // 获取默认收藏夹中的商品
        if (this.defaultCollectId) {
          const itemsResponse = await getFavoriteItems(this.userId, this.defaultCollectId)
          this.favoriteItems = Array.isArray(itemsResponse) ? itemsResponse : itemsResponse.data || []
        }
      } catch (error) {
        console.error('加载收藏夹数据失败:', error)
        this.$message.error('加载收藏夹数据失败: ' + (error.message || '未知错误'))
      }
    },
    
    // 检查商品是否已收藏
    isProductFavorited(productId) {
      return this.favoriteItems.some(item => item.productId === productId)
    },
    
    // 添加到收藏
    async addToFavorites(product) {
      // 检查登录状态
      if (!this.isLoggedIn) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      
      // 确保已获取收藏夹信息
      if (!this.defaultCollectId) {
        await this.loadFavoriteData()
      }
      
      // 如果仍未获取到默认收藏夹ID，则创建默认收藏夹
      if (!this.defaultCollectId) {
        try {
          await createFavorite(this.userId, '默认收藏夹')
          await this.loadFavoriteData()
        } catch (error) {
          console.error('创建默认收藏夹失败:', error)
          this.$message.error('创建默认收藏夹失败')
          return
        }
      }
      
      try {
        // 检查商品是否已收藏
        const isFavorited = this.isProductFavorited(product.id)
        
        if (isFavorited) {
          // 如果已收藏，则取消收藏
          await removeFavorite(this.userId, product.id, this.defaultCollectId)
          // 从本地列表中移除
          this.favoriteItems = this.favoriteItems.filter(item => item.productId !== product.id)
          this.$message.success('已取消收藏')
        } else {
          // 如果未收藏，则添加收藏
          await addFavorite(this.userId, product.id, this.defaultCollectId)
          // 添加到本地列表
          const favoriteItem = {
            productId: product.id,
            productName: product.name,
            productImage: product.fileName || ''
          }
          this.favoriteItems.push(favoriteItem)
          this.$message.success('已添加到收藏夹')
        }
        
        // 通知全局收藏夹组件更新
        window.dispatchEvent(new Event('favorite-updated'))
      } catch (error) {
        console.error('收藏操作失败:', error)
        this.$message.error('操作失败: ' + (error.message || '网络错误'))
      }
    }
  }
}
</script>

<style scoped>
@import '@/assets/css/easybuy-style.css';

</style>
